CSS : Exercice sur les flexbox avancé

1. Créez un nouveau fichier HTML nommé layout.html.

2. À l'intérieur du fichier HTML, créez une structure de base pour une page web, y compris un en-tête (<header>), une barre de navigation (<nav>), une section principale (<main>), une colonne latérale (<aside>), et un pied de page (<footer>).

3. Utilisez Flexbox pour créer une mise en page flexible qui répond aux exigences suivantes :

   • La barre de navigation doit être horizontale et placée en haut de la page.
   • La colonne latérale doit être placée à gauche du contenu principal.
   • Le contenu principal doit occuper l'espace restant à droite de la colonne latérale.
   • Le pied de page doit être en bas de la page.

4. Appliquez la propriété flex-grow pour que la colonne latérale prenne 1/4 de l'espace disponible et le contenu principal 3/4.

5. Utilisez la propriété flex-shrink pour que la colonne latérale réduise sa taille en cas de contrainte d'espace.

6. Utilisez la propriété align-self pour aligner le pied de page au bas de la page.

7. Ajoutez des styles CSS supplémentaires pour améliorer l'apparence de la mise en page, tels que des couleurs, des marges, des bordures, etc.

• Utilisez des classes pour cibler spécifiquement les éléments que vous souhaitez styler.

• Expérimentez avec différentes valeurs de flex-grow, flex-shrink, et align-self pour obtenir la mise en page souhaitée.

• Veillez à ce que la mise en page soit responsive pour s'adapter aux différentes tailles d'écran.

Une fois terminé, l'exercice devrait donner une mise en page flexible et réactive qui démontre l'utilisation des propriétés avancées de Flexbox pour organiser les éléments sur une page web.